<template>
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model">
			<view :class="model+'-wrap2'">
				<view class="status_bar">

				</view>
				<view class="nav_bar flex align-center">
					<view @click="$tool.goBack()" class="f0 p-3">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view class="topTitle A-Heavy ml-3" :class="model=='light'?'topTitleLight':''">
					{{i18n.l037}}
				</view>
				<view class="nameList ml-3 flex align-center A-Medium" :class="model=='light'?'nameListLight':''">
					<view @click="changePriceType(index)" class="mr-4 flex align-center justify-center"
						:class="index==priceType?'item1':'item'" v-for="(item,index) in nameList">
						<view v-if="index==0" class="f0" style="margin-right: 6rpx;">
							<image v-if="priceType==0" style="width: 28rpx;height: 28rpx;" src="/static/images/t2.png"
								mode=""></image>
							<image v-else style="width: 28rpx;height: 28rpx;" src="/static/images/t1.png" mode="">
							</image>
						</view>
						<view v-if="index==1" class="f0" style="margin-right: 6rpx;">
							<image v-if="priceType==0" style="width: 28rpx;height: 28rpx;"
								src="/static/images/index/9.png" mode=""></image>
							<image v-else style="width: 28rpx;height: 28rpx;" src="/static/images/index/8.png" mode="">
							</image>
						</view>
						<view v-if="index==2" class="f0" style="margin-right: 6rpx;">
							<image v-if="priceType==1" style="width: 28rpx;height: 28rpx;"
								src="/static/images/index/11.png" mode=""></image>
							<image v-else style="width: 28rpx;height: 28rpx;" src="/static/images/index/10.png" mode="">
							</image>
						</view>{{item}}
					</view>
				</view>
			</view>
			<view class="title1 text-alignC A-Medium" :class="model=='light'?'title1Light':''">
				{{i18n.l038}}
			</view>
			<view class="D-Bold text-alignC num1" :class="model=='light'?'num1Light':''">
				{{
					nameList[priceType]=='USDT'?USDTMoney.z:
					nameList[priceType]=='BTC'?BTCMoney.z:
					nameList[priceType]=='ETH'?ETHMoney.z:''
				}}
			</view>
			<view class="flex align-center justify-center" style="margin-top: 8rpx;margin-bottom: 32rpx;">
				<view class="title1" style="margin-top: 0;margin-bottom: 0;">
					{{i18n.l039}}
				</view>
				<view :class="USDTMoney.s<0?'text1':'text2'">
					${{
						nameList[priceType]=='USDT'?USDTMoney.s:
						nameList[priceType]=='BTC'?BTCMoney.s:
						nameList[priceType]=='ETH'?ETHMoney.s:''
					}} {{
						nameList[priceType]=='USDT'?USDTMoney.b:
						nameList[priceType]=='BTC'?BTCMoney.b:
						nameList[priceType]=='ETH'?ETHMoney.b:''
					}}%
				</view>
			</view>
			<view class="flex A-Medium align-center justify-between mx-3">
				<view class="block flex align-center flex-column" :class="model=='light'?'blockLight':''">
					<view class="title1" style="margin-top: 0;margin-bottom: 4rpx;">
						{{i18n.l040}}
					</view>
					<view class="num">
						{{profitAmount7d}}
					</view>
					<view class="label1 mt-1">
						<view class="text1">
							{{profitRate7d}}%
						</view>
					</view>
				</view>
				<view class="block flex align-center flex-column" :class="model=='light'?'blockLight':''">
					<view class="title1" style="margin-top: 0;margin-bottom: 4rpx;">
						{{i18n.l041}}
					</view>
					<view class="num">
						{{profitAmount30d}}
					</view>
					<view class="label1 mt-1">
						<view class="text1">
							{{profitRate30d}}%
						</view>
					</view>
				</view>
				<view class="block flex align-center flex-column" :class="model=='light'?'blockLight':''">
					<view class="title1" style="margin-top: 0;margin-bottom: 4rpx;">
						{{i18n.l042}}
					</view>
					<view class="num">
						{{profitAmount999}}
					</view>
					<view class="label2 mt-1">
						<view class="text2">
							{{profitRate999}}%
						</view>
					</view>
				</view>
			</view>
			<!-- 累计收益率 -->
			<view class="ml-3 mt-6 title2 A-Medium" :class="model=='light'?'title2Light':''">
				{{i18n.l043}}
			</view>
			<view class="py-3 flex align-center mx-3 nameList2" :class="model=='light'?'nameList2Light':''">
				<view @click="changelistIndex1(7)" class="mr-3 flex align-center justify-center" :class="listIndex==7?'item1':'item'">
					{{i18n.l044}}
				</view>
				<view @click="changelistIndex1(30)" class="mr-3 flex align-center justify-center" :class="listIndex==30?'item1':'item'">
					{{i18n.l045}}
				</view>
				<view @click="changelistIndex1(90)" class="mr-3 flex align-center justify-center" :class="listIndex==90?'item1':'item'">
					{{i18n.l046}}
				</view>
				<view @click="changelistIndex1(180)" class="mr-3 flex align-center justify-center" :class="listIndex==180?'item1':'item'">
					{{i18n.l047}}
				</view>
			</view>
			<view class="TypeLine" :class="model=='light'?'TypeLineLight':''">
				<view class="top">
					<view class="title">
						{{formattedDate}}
					</view>
					<view class="fbt">
						<div class="btc">
							{{nameList[priceType]}}{{i18n.l048}} <text class="bfb">{{ljsyObj.coinRate}}%</text>
						</div>
						<div class="sy">
							{{i18n.l049}} <text class="bfb">{{ljsyObj.profitRate}}%</text>
						</div>
					</view>
				</view>
				<l-echart class="" ref="chartContainer1" @finished="initChart1"></l-echart>
			</view>
			<!-- 每日收益 -->
			<view class="ml-3 mt-6 title2 A-Medium " :class="model=='light'?'title2Light':''">
				{{i18n.l050}}
			</view>
			<view class="py-3 flex align-center mx-3 nameList2" :class="model=='light'?'nameList2Light':''">
				<view @click="changelistIndex2(7)" class="mr-3 flex align-center justify-center"
					:class="listIndex2==7?'item1':'item'">
					{{i18n.l044}}
				</view>
				<view @click="changelistIndex2(30)" class="mr-3 flex align-center justify-center"
					:class="listIndex2==30?'item1':'item'">
					{{i18n.l045}}
				</view>
				<view @click="changelistIndex2(90)" class="mr-3 flex align-center justify-center"
					:class="listIndex2==90?'item1':'item'">
					{{i18n.l046}}
				</view>
				<view @click="changelistIndex2(180)" class="mr-3 flex align-center justify-center"
					:class="listIndex2==180?'item1':'item'">
					{{i18n.l047}}
				</view>
			</view>
			<view class="TypeLine" :class="model=='light'?'TypeLineLight':''">
				<view class="top">
					<view class="title">
						{{formattedDate}}
					</view>
					<view class="fbt2 flex align-center">
						<view class="color1">
							{{i18n.l050}}
						</view>
						<view class="color2">
							+${{mrsyObj.profitLossAmount}}
						</view>
					</view>
				</view>
				<l-echart class="" ref="chartContainer2" @finished="initChart2"></l-echart>
			</view>
			<view class="" style="height: 40rpx;">

			</view>
		</view>
	</view>
</template>

<script>
	import {
		assetDayProfitLoss,
		historyProfitLossRate,
		profitLossRate
	} from '@/core/api/user.js';
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		data() {
			return {
				nameList: ['USDT', 'BTC', 'ETH'],
				priceType: 0,
				listIndex: 7,
				listIndex2: 7,
				formattedDate: '',
				mrsyObj: {},
				ljsyObj:{},
				"profitRate7d": 0,
				"profitRate30d": 0,
				"profitRate999": 0,
				"profitAmount7d": 0,
				"profitAmount30d": 0,
				"profitAmount999": 0
			}
		},
		computed: {
			i18n() {
				return this.$t('last')
			},
			model() {
				return this.$store.state.config.model
			},
			USDTMoney() {
				return this.$store.state.config.USDTMoney
			},
			BTCMoney() {
				return this.$store.state.config.BTCMoney
			},
			ETHMoney() {
				return this.$store.state.config.ETHMoney
			},
		},
		onLoad() {
			
			const today = new Date();
			const year = today.getFullYear();
			const month = String(today.getMonth() + 1).padStart(2, '0');
			const day = String(today.getDate()).padStart(2, '0');
			this.formattedDate = `${year}-${month}-${day}`;
			this.mrsy();
			this.getHistoryProfitLossRate();
			this.getProfitLossRate();
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			// 用户余额
			this.$store.dispatch('config/getAassetList');
		},
		methods: {
			
			getProfitLossRate(){
				profitLossRate({
					coinType: this.nameList[this.priceType],
					mobileUserId: uni.getStorageSync('mobileUserId'),
					range: this.listIndex,
				}).then(res=>{
					console.log(res,'------------')	
					this.ljsyObj = res.result;
					this.initChart1();
				})
			},
			getHistoryProfitLossRate(){
				historyProfitLossRate({
					coinType: this.nameList[this.priceType],
					mobileUserId: uni.getStorageSync('mobileUserId'),
				}).then(res=>{
					let obj = res.result;
					this.profitRate7d = obj.profitRate7d;
					this.profitRate30d = obj.profitRate30d;
					this.profitRate999 = obj.profitRate999;
					this.profitAmount7d = obj.profitAmount7d;
					this.profitAmount30d = obj.profitAmount30d;
					this.profitAmount999 = obj.profitAmount999;
				})
			},
			changelistIndex1(e){
				if (this.listIndex == e) {
					return;
				}
				this.listIndex = e;
				this.getProfitLossRate()
			},
			changelistIndex2(e) {
				if (this.listIndex2 == e) {
					return;
				}
				this.listIndex2 = e;
				this.mrsy();
			},
			mrsy() {
				assetDayProfitLoss({
					coinType: this.nameList[this.priceType],
					mobileUserId: uni.getStorageSync('mobileUserId'),
					range: this.listIndex2,
				}).then(res => {
					console.log(res, 'cs');
					this.mrsyObj = res.result;
					this.initChart2();
				})
			},
			changePriceType(e) {
				if (this.priceType == e) {
					return;
				}
				this.priceType = e;
				this.getHistoryProfitLossRate();
				this.mrsy();
				this.getProfitLossRate()
			},
			async initChart1() {
				// const chartContainer = this.$refs.chartContainer1;
				let chart = await this.$refs.chartContainer1.init(echarts);
				let list = this.ljsyObj.coinPriceList;
				let list2 = this.ljsyObj.profitRateList;
				let name = this.nameList[this.priceType];
				let color1 = '#FE7301';
				let color2 = '#006EFF';
				let btcData = [] //涨跌比例
				let syData = [] ;//收益的数据
				let timeData = [] //底部显示的日期数据
				for (let i = 0; i < list.length; i++) {
					if (i == 0) {
						timeData.push(list[i].priceDate.split('-')[1] + '-' + list[i].priceDate.split('-')[2])
					} else if (i == (list.length - 1)) {
						timeData.push(list[i].priceDate.split('-')[1] + '-' + list[i].priceDate.split('-')[2])
					} else {
						timeData.push('');
					}
					btcData.push(list[i].priceChangePercent24h);
					
				}
				for (let i = 0; i < list2.length; i++) {
					syData.push(list2[i].profitRate);
				}
				let option = {
					backgroundColor: 'transparent',
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: '#57617B'
							}
						}
					}, //到tooltip 是鼠标经过的显示的框

					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						top: '35%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						axisLine: {
							lineStyle: {
								color: '#57617B'
							}
						},
						data: timeData
					}],
					yAxis: [{
						type: 'value',
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#57617B'
							}
						},
						axisLabel: {
							margin: 10,
							textStyle: {
								fontSize: 14
							}
						},
						splitLine: {
							lineStyle: {
								color: '#57617B'
							}
						}
					}],
					series: [{
						name: name,
						type: 'line',
						smooth: true,
						symbol: 'circle',
						symbolSize: 5,
						showSymbol: false,
						lineStyle: {
							normal: {
								width: 2,
								color:color1,
							}
						},
						// itemStyle: {
						// 	normal: {
						// 		color: 'rgba(230, 129, 14, 1.0)'
						// 	},
						// 	emphasis: { //鼠标经过展示的框
						// 		color: 'rgb(0,196,132)',
						// 		borderColor: 'rgba(230, 129, 14, 1.0)',
						// 		extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
						// 		borderWidth: 10
						// 	}
						// },
						data: btcData
					}, {
						name: '收益',
						type: 'line',
						smooth: true,
						symbol: 'circle',
						symbolSize: 5,
						showSymbol: false,
						lineStyle: {
							normal: {
								width: 2,
								color:color2,
							}
						},
						// itemStyle: {
						// 	normal: {
						// 		color: 'rgba(0, 117, 243, 1.0)'
						// 	},
						// 	emphasis: {
						// 		color: 'rgb(99,250,235)',
						// 		borderColor: 'rgba(0, 117, 243, 1.0)',
						// 		extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
						// 		borderWidth: 10
						// 	}
						// },
						data: syData
					}]
				};
				chart.setOption(option)
			},
			async initChart2() {
				// const chartContainer = this.$refs.chartContainer1;
				let list = this.mrsyObj.dataList;
				let xDate = [];
				let vDate = [];
				for (let i = 0; i < list.length; i++) {
					if (i == 0) {
						xDate.push(list[i].billDate.split('-')[1] + '-' + list[i].billDate.split('-')[2])
					} else if (i == (list.length - 1)) {
						xDate.push(list[i].billDate.split('-')[1] + '-' + list[i].billDate.split('-')[2])
					} else {
						xDate.push('');
					}
					vDate.push({
						value: list[i].profitLossAmount,
						itemStyle: {
							color:list[i].profitLossAmount<0?'#00aa76':'#fe0047' 
						}
					})
				}
				let chart = await this.$refs.chartContainer2.init(echarts);
				let option = {
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						top: '35%',
						containLabel: true
					},

					xAxis: {
						type: 'category',
						boundaryGap: false,
						axisLine: {
							lineStyle: {
								color: '#57617B'
							}
						},
						data: xDate
					},
					yAxis: {
						type: 'value',
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#57617B'
							}
						},
						axisLabel: {
							margin: 20,
							textStyle: {
								fontSize: 14
							}
						},
						splitLine: {
							lineStyle: {
								color: '#57617B'
							}
						}
					},
					series: [{
						data: vDate,
						type: 'bar'
					}]
				};

				chart.setOption(option)
			},
		}
	}
</script>

<style scoped lang="scss">
	.TypeLine {
		width: 750rpx;
		height: 502rpx;
		// padding: 40rpx;
		background-color: #161823;
		position: relative;

		.top {
			position: absolute;
			top: 30rpx;
			left: 0;
			right: 0;
			width: 680rpx;
			margin: auto;

			.title {
				font-size: 24rpx;
				color: #8F919D;
			}

			.fbt2 {
				font-size: 28rpx;

				.color1 {
					color: #f7f7f7;
				}

				.color2 {
					color: #D22540;
				}
			}

			.fbt {
				display: flex;
				justify-content: space-between;
				color: #8F919D;
				font-size: 26rpx;
				margin-top: 40rpx;

				.bfb {
					color: #029F70;
				}

				.btc {
					position: relative;
				}

				.btc::after {
					content: '';
					width: 10rpx;
					height: 10rpx;
					background: #FE7301;
					border-radius: 50%;
					position: absolute;
					left: -20rpx;
					top: 16rpx;
				}

				.sy {
					position: relative;
				}

				.sy::after {
					content: '';
					width: 10rpx;
					height: 10rpx;
					background: #006EFF;
					border-radius: 50%;
					position: absolute;
					left: -20rpx;
					top: 16rpx;
				}
			}
		}

		.bottom {
			width: 720rpx;
			margin: 0 auto;
			margin-top: -60rpx;

			.chart-container {
				width: 100%;
				height: 400rpx;
			}
		}

	}
	.TypeLineLight {
		width: 750rpx;
		height: 502rpx;
		// padding: 40rpx;
		background-color: #fff;
		position: relative;
	
		.top {
			position: absolute;
			top: 30rpx;
			left: 0;
			right: 0;
			width: 680rpx;
			margin: auto;
	
			.title {
				font-size: 24rpx;
				color: #8F919D;
			}
	
			.fbt2 {
				font-size: 28rpx;
	
				.color1 {
					color: #7F838D;
				}
	
				.color2 {
					color: #D22540;
				}
			}
	
			.fbt {
				display: flex;
				justify-content: space-between;
				color: #8F919D;
				font-size: 26rpx;
				margin-top: 40rpx;
	
				.bfb {
					color: #029F70;
				}
	
				.btc {
					position: relative;
				}
	
				.btc::after {
					content: '';
					width: 10rpx;
					height: 10rpx;
					background: #FE7301;
					border-radius: 50%;
					position: absolute;
					left: -20rpx;
					top: 16rpx;
				}
	
				.sy {
					position: relative;
				}
	
				.sy::after {
					content: '';
					width: 10rpx;
					height: 10rpx;
					background: #006EFF;
					border-radius: 50%;
					position: absolute;
					left: -20rpx;
					top: 16rpx;
				}
			}
		}
	
		.bottom {
			width: 720rpx;
			margin: 0 auto;
			margin-top: -60rpx;
	
			.chart-container {
				width: 100%;
				height: 400rpx;
			}
		}
	
	}
	.title2 {
		font-size: 32rpx;
		color: #F7F7F7;
	}
	.title2Light {
		font-size: 32rpx;
		color: #0E0F11;
	}

	.block {
		width: 210rpx;
		min-height: 172rpx;
		background: #16181C;
		border-radius: 16rpx;
		padding: 20rpx 0;

		.num {
			font-size: 36rpx;
			color: #F7F7F7;
		}

		.label1 {
			background: rgba(83, 210, 144, 0.06);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 6rpx 10rpx;
		}

		.label2 {
			background: rgba(210, 37, 64, 0.06);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 6rpx 10rpx;
		}
	}
	.blockLight {
		width: 210rpx;
		min-height: 172rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx 0;
	
		.num {
			font-size: 36rpx;
			color: #0E0F11;
		}
	
		.label1 {
			background: rgba(83, 210, 144, 0.06);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 6rpx 10rpx;
		}
	
		.label2 {
			background: rgba(210, 37, 64, 0.06);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 6rpx 10rpx;
		}
	}
	.text1 {
		font-size: 20rpx;
		color: #53D290;
	}

	.text2 {
		font-size: 20rpx;
		color: #D22540;
	}

	.num1 {
		font-weight: bold;
		font-size: 60rpx;
		color: #F7F7F7;
	}

	.num1Light {
		color: #0E0F11;
	}

	.title1 {
		font-size: 24rpx;
		color: #7F838D;
		margin-top: 56rpx;
		margin-bottom: 16rpx;
	}

	.title1Light {
		font-size: 24rpx;
		color: #7F838D;
	}

	.topTitle {
		font-size: 40rpx;
		color: #F7F7F7;
		margin-top: 48rpx;
		margin-bottom: 36rpx;
	}

	.topTitleLight {
		font-size: 40rpx;
		color: #0E0F11;
	}

	.nameList {
		margin-top: 34rpx;

		.item {
			width: 144rpx;
			height: 60rpx;
			background: #16181C;
			border-radius: 12rpx;
			border: 2rpx solid #1F2128;
			font-size: 28rpx;
			color: #AAACB8;
		}

		.item1 {
			width: 144rpx;
			height: 60rpx;
			background: #16181C;
			border-radius: 12rpx;
			border: 2rpx solid #7F838D;
			font-size: 28rpx;
			color: #F7F7F7;
		}
	}

	.nameList2 {
		margin-top: 34rpx;

		.item {
			width: 144rpx;
			height: 60rpx;
			background: #16181C;
			border-radius: 12rpx;
			font-size: 28rpx;
			color: #AAACB8;
		}

		.item1 {
			width: 144rpx;
			height: 60rpx;
			background: #5951BA;
			border-radius: 12rpx;
			font-size: 28rpx;
			color: #F7F7F7;
		}
	}

	.nameList2Light {
		margin-top: 34rpx;

		.item {
			width: 144rpx;
			height: 60rpx;
			background: #FFF;
			border-radius: 12rpx;
			border: 2rpx solid #1F2128;
			font-size: 28rpx;
			color: #AAACB8;
			border: none;
		}

		.item1 {
			width: 144rpx;
			height: 60rpx;
			background: #5951BA;
			border-radius: 12rpx;
			border: 2rpx solid #7F838D;
			font-size: 28rpx;
			color: #F7F7F7;
			border: none;
		}
	}

	.nameListLight {
		.item {
			background: #FFFFFF;
			border: none;
		}

		.item1 {
			background: #5951BA;
			border: none;
		}
	}
</style>